<template>
	<view class="animated fadeIn faster">
		<view class="d-flex d-flex-column px-4" style="padding-top: 250rpx;">
			<view class="d-flex d-flex-column d-flex-middle mb-10">
				<view class="welcom main-color">欢迎打手登录</view>
				<view class="font22 color999">账号密码由管理员分配</view>
			</view>
			<view class="position-relative mb-4">
				<input v-model="phoneNum" class="inpt" placeholder="请输入手机号码" placeholder-class="colorhold" />
			</view>
			<view class="position-relative mb-8">
				<input v-model="pwd" class="inpt" placeholder="请输入密码" placeholder-class="colorhold" />
			</view>
			<view class="d-flex d-flex-middle mb-2">
				<checkbox :checked="isChecked" color="#598dfc" style="transform:scale(0.6)"
					@click="isChecked = !isChecked"></checkbox>
				<view>
					<text class="font24 color999" @click="isChecked = !isChecked">我已阅读并同意</text>
					<text class="font24 main-color" @click="goUrl('/subPages/agreement/agreement')">《用户协议》</text>
					<text class="font24 color999">和</text>
					<text class="font24 main-color" @click="goUrl('/subPages/privacy/privacy')">《隐私条款》</text>
				</view>
			</view>
			<button class="login-button d-flex d-flex-middle d-flex-center bg-main mb-3" @click="sure">立即登录</button>

			<button v-if="isWeixinMP" class="login-button d-flex d-flex-middle d-flex-center bg-wx" :disabled="isLogin" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">{{isLogin?'登陆中...':'手机号快捷登录'}}</button>

		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import { USER_TOKEN } from '@/constants/local-storage-key-const';
	import { userApi } from '@/http/userApi.js';
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				isLogin:false,
				isChecked:true,
				pwd:'',
				phoneNum:'',
				code:'',
				totalTime:60,
				codeBtnText:'发送验证码',
        isWeixinMP: false
			}
		},
		computed: {
		  ...mapState({
		    inviteCode: state => state.inviteCode,
		  })
		},
    mounted() {
      // #ifdef MP-WEIXIN
      this.isWeixinMP = true;
      // #endif
    },
		methods: {
			setCheck(){
				uni.showToast({
					title: '请同意用户隐私协议',
					icon:'none'
				})
			},
			async decryptPhoneNumber(e) {
				let that = this
				let params = {
					code: e.detail.code,
					invite_code: that.inviteCode,
				}
				that.isLogin = true
				try {
					let udata = await userApi.wxLogin(params)
					uni.setStorageSync(USER_TOKEN, udata.token)
					store.commit('setUserInfo', udata.users)
					uni.reLaunch({
						url:'/pages/index/index'
					})
					that.isLogin = false
				} catch (e) {
					that.isLogin = false
				}
			},
			sendCode(){

			},
		async	sure(){
        try {
				let params = {
					phone: this.phoneNum,
					password: this.pwd,
				}
				let udata = await userApi.passwordLogin(params)
				uni.setStorageSync(USER_TOKEN, udata.token)
				store.commit('setUserInfo', udata.users)
				uni.reLaunch({
					url:'/pages/index/index'
				})
			} catch (e) {
				console.log(e)
			}
			},
			goUrl(url){

			}
		}
	}
</script>

<style scoped>
.welcom{
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	font-weight: 500;
	font-size: 52rpx;
}
.inpt{
	position: relative;
	border: 1px solid #d0d2d9;
	height: 96rpx;
	padding-left: 30rpx;
	border-radius: 16rpx;
	box-sizing: border-box;
	transition: all .2s linear;
}
.inpt:hover{
	border-color: #2f2f2f
}
.login-button{
	border-radius: 60rpx;
	height: 96rpx;
	width: 100%;
	font-size: 32rpx;
	font-weight: 500;
	border: solid 1px #2f2f2f;
	cursor: pointer;
	color: #fff;
	padding: 0;
	transition: all .2s linear;
}
.bg-wx{
	background-color: #fff;
	color: #2f2f2f;
}
.login-button::after{border-width: 0!important;}
.code-btn{
	position: absolute;
	right: 1px;
	top: 1px;
	line-height: 44px;
	height: 44px;
	border-radius: 8px;
	letter-spacing: 1px;
	text-align: center;
	cursor: pointer;
	font-size: 30rpx;
	background-color: #fff;
	padding: 0 40rpx;
	color: #2f2f2f;
	border: 0;
}
.sending{
	color: #999;
	white-space: nowrap;
	font-size: 30rpx;
	letter-spacing: 0;
	cursor: default;
}
button[disabled]:not([type]){color:#bfbfbf;background-color:#F2F2F2;border-color: #F2F2F2;border-width: 0;}
</style>
